<template>
  <div class="classIn">
    <div id="sear">
      <div style="display:flex;align-items:center;margin-right:20px">
        <span style="width:100px ;font-weight:600;">输入搜索</span>
        <el-input v-model="search" placeholder="输入课程ID"></el-input>
      </div>

      <div class="block">
        <span class="demonstration" style="font-weight:600;padding-right:10px">上次消费时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="开始日期"></el-date-picker>
        <span style="opacity:.5">-</span>

        <el-date-picker v-model="value2" type="date" placeholder="结束日期"></el-date-picker>
      </div>
      <el-button type="primary" style="font-weight:600 ; " @click="searchData">查询</el-button>
      <el-button style="font-weight:600;" @click="resetData">重置</el-button>

      <!-- margin: 0 30px 0 15pxmargin:0 15px -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-caret-bottom"></i>
          高级筛选
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-checkbox-group v-model="dropgroup">
            <el-dropdown-item>
              <el-checkbox label="上架"></el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox label="下架"></el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox label="上传人"></el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox label="课程名称"></el-checkbox>
            </el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import Bus from "../../utils/Bus";
export default {
  data() {
    return {
      search: "",
      value1: "",
      value2: "",
      dropgroup: []

    };
  },
  mounted() {
    this.searchData();
  },
  methods: {
    searchData() {
      Bus.$emit("search", this.search);
    },
    resetData() {
      this.search = "";
      this.$parent.getclass(this.search);
    },

  }
};
</script>

<style lang="less" scoped>
.classIn {
  height: 64px;
  background-color: #fff;
}
#sear {
  display: flex;
  height: 64px;
  justify-content: space-evenly;

  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>